<!-- Form -->
<template>
<v-dialog persistent fullscreen :value="dialog" transition='scroll-x-transition'>
  <v-card>
    <v-app-bar color="primary" fixed>
      <v-btn icon dark @click="$emit('update:dialog', false)">
        <v-icon>close</v-icon>
      </v-btn>
      <v-toolbar-title class="white--text">内容{{ mode === 'create' ? '新增' : '编辑' }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <!-- <v-btn @click="$emit('update:dialog', false)"><v-icon>close</v-icon></v-btn> -->
      <v-btn dark class="warning" text large @click="itemDelete([item])"><v-icon>delete</v-icon>删除</v-btn>
      <v-btn dark class="red  mx-5" text @click="submit('draft')" large :loading="btnDisabled" :disabled="btnDisabled"><v-icon>drafts</v-icon>保存草稿</v-btn>
      <v-btn dark class="green" text @click="submit('published')" large :loading="btnDisabled" :disabled="btnDisabled"><v-icon>publish</v-icon>保存发布</v-btn>
      <v-btn icon @click="settings = !settings"><v-icon>settings</v-icon></v-btn>
    </v-app-bar>
    <v-card-text style="margin-top:50px;" class="pt-5">
      <v-container>
        <v-form ref="dialogForm">
          <v-row>
            <v-col cols='12' sm="12" :md="settings ? 8 : 12">
              <v-text-field
                label="标题"
                v-model="formData.title"
                prepend-icon="title"
                name="title"
                required
                v-validate="'required|max:40'"
                :error-messages="errors.collect('title')"
                data-vv-as="标题"
              ></v-text-field>
                <!-- <v-text-field label="副标题" v-model="formData.sub_title" prepend-icon="subtitles"></v-text-field> -->
                <rich-text-editor :key="1" v-model="formData.content"></rich-text-editor>
                <v-textarea
                  label="简介"
                  placeholder="自动或者手动输入内容简介信息，字数不得超过100个字..."
                  class="mt-4"
                  outlined
                  v-model="formData.intro"
                  counter
                  rows="3"
                  auto-grow
                  name="intro"></v-textarea>
            </v-col>
            <v-col cols='12' sm="12" :md="settings ? 4 : 12" v-show="settings">
                  <category-select
                    v-model="formData.category"
                    prepend-icon="category"
                    name="category"
                    placeholder="请选择分类！"
                  ></category-select>
                  <!-- <v-text-field dense prepend-icon="filter_vintage" label="标签" v-model="formData.tags" hint="英文逗号分隔！"></v-text-field> -->
                  <TagsSelect v-model="formData.tags" />
                  <v-text-field  prepend-icon="file_copy" label="来源" v-model="formData.source"></v-text-field>
                  <v-text-field  prepend-icon="person" label="作者" v-model="formData.author"></v-text-field>
                  <v-text-field  prepend-icon="room" label="地区" v-model="formData.area" hint="请输入地区" ></v-text-field>
                  <v-switch
                    v-model="formData.redirect"
                    false-value="no"
                    true-value="yes"
                    color="indigo"
                    :label="'是否跳转链接地址：' + (formData.redirect === 'no' ? '不跳转':'跳转至如下链接')"
                  ></v-switch>
                  <v-text-field
                  v-if="formData.redirect === 'yes'"
                  prepend-icon="launch"
                  label="跳转URl"
                  v-model="formData.redirect_url"
                  name="redirect_url"
                  ></v-text-field>
                  <v-switch
                    v-model="formData.top"
                    true-value="yes"
                    false-value="no"
                    color="red"
                    :label="'是否置顶内容：' + (formData.top === 'yes' ? '置顶' : '不置顶')"
                  ></v-switch>
                  <CommentSwitch v-model="formData.comment"/>
                  <v-text-field
                  label="点击量"
                  prepend-icon="exposure_plus_1"
                  v-model="formData.hits"
                  type="number"
                  hint="只能填写正整数！"></v-text-field>
                  <v-text-field
                  label="排序权重"
                  prepend-icon="sort"
                  v-model="formData.position"
                  type="number"
                  hint="只能填写正整数！数值越大，内容排序越靠前！"></v-text-field>
                  <date-time-picker v-model="formData.publish_time" label="发布时间"></date-time-picker>
            </v-col>
          </v-row>
          <v-row>
            <v-col>
              <image-upload v-model="formData.images"></image-upload>
            </v-col>
          </v-row>
        </v-form>
      </v-container>
    </v-card-text>
  </v-card>
  </v-dialog>
</template>
<script>
import * as API from '@/api/admin/content.js'
import { ImageUpload, RichTextEditor, DateTimePicker } from '@/components/Form/'
import CategorySelect from './CategorySelect2.vue'
import TagsSelect from './TagsSelect.vue'
import CommentSwitch from './CommentSwitch.vue'
export default {
  name: 'ContentForm',
  components: { ImageUpload, RichTextEditor, DateTimePicker, CategorySelect, TagsSelect, CommentSwitch },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => { return {} }
    }
  },
  data: function () {
    return {
      formData: {}, // form参数
      btnDisabled: false, // 按钮状态
      settings: true
    }
  },
  watch: {
    'formData.content': function(newVal, oldVal) {
      if (newVal !== undefined && newVal !== null) {
        this.formData.intro = newVal.replace(/<[^>]+>/g, '').substring(0, 100)
      }
    },
    item: function(newVal, oldVal) {
      this.formData = newVal
    }
  },
  computed: {
    mode: function() {
      return this.formData.hasOwnProperty('id') ? 'edit' : 'create'
    }
  },
  methods: {
    itemDelete: function(items) {
      if (confirm('是否确定删除？删除后无法恢复，请慎重！')) {
        API.deleteOne(items.map(e => e.id).join('_')).then(res => {
          this.$toasted.success(res.data)
          this.$emit('update:dialog', false)
          this.$emit('refreshdata')
        }).catch(err => {
          return Promise.reject(err)
        })
      }
    },
    submit: function(status) {
      if (!status) return
      this.$validator.validate().then(result => {
        if (result) {
          this.btnDisabled = true
          setTimeout(() => {
            this.btnDisabled = false // 点击一次时隔两秒后才能再次点击
          }, 2000)
          this.formData.status = status
          const submitFunc = this.mode === 'create' ? API.createOne : API.updateOne
          submitFunc(this.formData).then(res => {
            this.$toasted.success(res.data)
            this.$emit('update:dialog', false)
            this.$emit('refreshdata')
          }).catch(err => {
            // this.$toasted.error(err.response.data)
            // console.log(err.response)
            return Promise.reject(err)
          }).finally(() => {
            this.btnDisabled = false
            // this.$emit('update:dialog', false)
            // this.$emit('refreshdata')
          })
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
